import React, { useState, useRef, useEffect } from 'react'
import "./index.scss"
import thisImg from "../../assets/images/503.png"
import { Progress } from 'antd'

export default function NotFound(
    props: any
) {

    const { history } = props



    const bgstar: any = useRef()

    const [spanNum, setSpanNum] = useState<Array<any>>([])

    let [percent, setPercent] = useState<number>(0)
    let timer: any = null
    useEffect(() => {
        getSpanList()
        ititTimer()
        return () => {
            clearInterval(timer)
            timer = null
        }
    }, [])


    const ititTimer = (): void => {
        timer = setInterval(() => {
            if (percent < 100) {
                setPercent(++percent)
            } else {
                clearInterval(timer)
                timer = null
                history.push("/login")

            }

        }, 40)
    }

    const gotowhere = () => {
        history.push("/login")
        clearInterval(timer)
        timer = null
    }

    const getSpanList = (): void => {
        var width: number = bgstar.current.clientWidth;
        var height: number = bgstar.current.clientHeight;
        console.log(width, height);

        for (var i = 0; i < 520; i++) {
            // 随机位置
            var x = Math.floor(Math.random() * width);
            var y = Math.floor(Math.random() * height);

            // 随机频率
            var rate = Math.random() * 2.5;

            // 随机大小
            var scaler = Math.random() * 1.5;

            // 随机颜色
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            var a = Math.random() * 1;

            spanNum.push({
                x: x + "px",
                y: y + "px",
                rate,
                scaler,
                rgba: `rgba(${r},${g},${b},${a})`,
            });
        }
        setSpanNum([...spanNum])    // 最终修改数据
    };



    return (
        <div className='errorpage' id='bgstar' ref={bgstar}>
            <div className='dao' onClick={gotowhere}>
                <Progress type="circle" percent={percent} width={60} />
            </div>
            <img src={thisImg} alt="" className='myimg' />
            {
                spanNum.map((l, i) => {
                    return (
                        <span key={i} className='spandot'
                            style={{
                                top: l.y,
                                left: l.x,
                                animationDelay: l.rate + 's',
                                transform: `scale(${l.scaler})`,
                                background: l.rgba,
                            }}
                        >

                        </span>
                    )

                })
            }
        </div>
    )
}
